<template>
    <div class="tanxin tianjia">
        <span>
            数据列表
        </span>
        <div>
            <el-button @click="uptianjia">添加</el-button>
        </div>
    </div>
    <div class="table" :key='KeyVal'>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="180" />
            <el-table-column prop="name" label="秒杀时间段名称" width="180" />
            <el-table-column prop="address" label="每日开始时间">
                <template #default="scope">
                    {{ scope.row.startTime ? dayjs(scope.row.startTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                </template>
            </el-table-column>
            <el-table-column label="每日结束时间">
                <template #default="scope">
                    {{ scope.row.endTime ? dayjs(scope.row.endTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="启用">
                <template #default="scope">
                    <el-switch @change="onChange(scope.row.id, scope.row.status)"
                        :value="scope.row.status == 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <div class="tanxin" style="width: 70%;margin: 0 auto;color: skyblue;">
                        <a @click="onbianji(scope.row)"> 编辑</a>
                        <a @click="ondelet(scope.row.id)"> 删除</a>
                    </div>

                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog v-model="dialogVisible2" title="提示" width="40%">
        <div>
            是否确认？
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="querenclick">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible" title="添加时间段" width="40%">
        <div style="padding-left: 20px;padding-right:50px">
            <el-form-item label="秒杀时间段名称:">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="开始时间">
                <el-time-picker v-model="form.startTime" placeholder="请选择时间" />
            </el-form-item>
            <el-form-item label="结束时间">
                <el-time-picker v-model="form.endTime" placeholder="请选择时间" />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">不启用</el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="formClick">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as api from '../../request/api'
import dayjs from 'dayjs'
import { ElTable, ElMessage } from 'element-plus'

// 表格数据
let tableData = ref()
// 进来就发起请求那表格数据
let getshuju = async () => {
    tableData.value = await api.yxadmin.getFlashSessList()
}
// 发请求
getshuju()
// 设置key值 更新页面
let KeyVal = ref(1)
// 表单对话框
let dialogVisible = ref(false)
// 确认对话框
let dialogVisible2 = ref(false)
let form = ref({
    name: '',
    startTime: '',
    status: 0,
    endTime: ''

})
// 1 为添加   2 为编辑  3 为删除
let iftianjiaandbianji = ref()
// 添加按钮
let uptianjia = () => {
    form.value = {
        name: '',
        startTime: '',
        status: 0,
        endTime: ''
    }
    dialogVisible.value = true
    iftianjiaandbianji.value = 1
}
// 编辑 按钮
let onbianji = (row: any) => {
    form.value = row
    dialogVisible.value = true
    iftianjiaandbianji.value = 2
}
// id
let id = ref()
// 删除 按钮
let ondelet = (i: number) => {
    id.value = i
    iftianjiaandbianji.value = 3
    dialogVisible2.value = true
}
// 确认按钮
let querenclick = async () => {
    // 添加
    if (iftianjiaandbianji.value == 1) {
        await api.yxadmin.CreateSession(form.value)
    } else if (iftianjiaandbianji.value == 2) {
        // 编辑
        await api.yxadmin.UpdateSession(form.value)
    } else {
        // 删除
        await api.yxadmin.DeleteSession(id.value)
    }
    KeyVal.value++
    dialogVisible2.value = false
    dialogVisible.value = false
    getshuju()
    ElMessage({
        type: 'success',
        message: '操作成功',
    })
}
//   from确认按钮
let formClick = () => {
    dialogVisible2.value = true
}
// 启用按钮
let onChange = async (id: number, status: number) => {
    await api.yxadmin.PUpdatastatus({ id, status: ((status - 1) * -1) })
    getshuju()
    ElMessage({
        type: 'success',
        message: '操作成功',
    })
}
</script>

<style scoped lang="scss">
.tianjia {
    margin: 20px;
    padding: 20px;
    height: 60px;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 20px;
    border-radius: 5px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border: 1px solid #eee;
    align-items: center;
    font-size: 14px;
    margin-bottom: 20px;
}

.table {
    margin: 20px;
    border: 1px solid #eee;
}

:deep .el-dialog {
    width: 100% !important;
    min-width: 450px !important;
}
</style>